<template>
 <div>
   <el-breadcrumb separator="/">
     <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
     <el-breadcrumb-item>权限管理</el-breadcrumb-item>
     <el-breadcrumb-item>权限列表</el-breadcrumb-item>
   </el-breadcrumb>
<!--   卡片视图-->
   <el-card>
     <el-table
         :data="rightsList"
         style="width: 100%"
         border
         stripe
     >
       <el-table-column type="index" align="center">

       </el-table-column>
       <el-table-column label="权限名称" prop="authName" align="center">
       </el-table-column>
       <el-table-column label="路径" prop="path" align="center">
       </el-table-column>
       <el-table-column label="权限等级" prop="level" align="center">
         <template slot-scope="scope">
           <el-tag v-if="scope.row.level==='0'">一级权限</el-tag>
           <el-tag type="success" v-else-if="scope.row.level==='1'">二级权限</el-tag>
           <el-tag type="warning" v-else>三级权限</el-tag>
         </template>
       </el-table-column>
     </el-table>
   </el-card>
 </div>
</template>

<script>
export default {
name: "rights",
  data(){
  return{
    //所有的权限列表
    rightsList:[]
  }
  },
  created() {
  this.getRightsList();
  },
  methods:{
   async getRightsList(){
    const {data:res}=await this.$http.get('rights/list');
    if(res.meta.status!==200){
      return this.$message.error("获取权限失败")
    }
    // 获取成功,保存返回的数据
     this.rightsList=res.data;

  }
  }
}
</script>

<style scoped>

</style>